<template>
  <div class="row mt-4">
    <div class="col-auto">
      <el-card class="cardbox card-billmaterials">
        <div slot="header">
          <div class="d-flex justify-content-between">
            <el-select
              v-model="selectVal"
              class="select"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, k) in options"
                :key="k"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="searchVal"
              placeholder="请输入内容"
              class="search"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
            <button class="btn btn-create btn-outline-primary">
              <i class="iconfont icon_add2"></i>创建
            </button>
          </div>
        </div>
        <div class="card-billmaterials-body card-billmaterials-scroll">
          <sort-table></sort-table>
        </div>
        <div>
        </div>
      </el-card>
    </div>
    <div class="col">
      <el-card class="materialsDetails">
        <div slot="header">
          <div class="row">
            <div class="col">
              <span class="materialsDetails-title"> 田恒宝的文件4 </span>
              <ul class="materialsDetails-meta">
                <li class="materialsDetails-meta-item">物料</li>
                <li class="materialsDetails-meta-item">Kevin xu</li>
                <li class="materialsDetails-meta-item">2020/07/16 10：41：52</li>
              </ul>
            </div>
            <div class="col-auto">
              <div class="row justify-content-end align-items-center">
                <div class="col-auto input-suffix">
                  <label class="mr-3">状态</label>
                  <el-select v-model="statusVal" placeholder="" style="width:128px;">
                    <el-option
                      v-for="(item, k) in options"
                      :key="k"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="col-auto input-suffix">
                  <label class="mb-0">发布日期：</label>
                  <span class="">2020/07/15 14:57:37</span>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="materialsDetails-body card-billmaterials-scroll">
          <el-tabs
            v-model="tabName"
            @tab-click="tabClick"
          >
            <el-tab-pane
              v-for="(item, k) in tabPaneList"
              :key="k"
              :label="item.label"
              :name="item.name"
              class="tab-pane"
            >
              <template v-if="item.name === '01'">
                <!-- 基本属性 -->
                <basic-attributes
                  ref="basicAttributes"
                  v-loading="baLoading"
                  :is-edit="baIsEdit"
                  :from-data="baFromData"
                  @save="baHandleSave"
                  @cancel="baHandleCancel"
                  @edit="baHandleEdit"
                ></basic-attributes>
              </template>
              <template v-else-if="item.name === '02'">
                <!-- BOM -->
                <bill-materials-bom></bill-materials-bom>
              </template>
              <template v-else-if="item.name === '03'">
                <!-- 附件 -->
                <file></file>
              </template>
              <template v-else-if="item.name === '04'">
                <!-- 关系 -->
                关系
              </template>
              <template v-else-if="item.name === '05'">
                <!-- 替代料 -->
                替代料
              </template>
              <template v-else-if="item.name === '06'">
                <!-- 变更记录 -->
                变更记录
              </template>
              <template v-else-if="item.name === '07'">
                <!-- 使用位置 -->
                使用位置
              </template>
              <template v-else-if="item.name === '08'">
                <!-- 历史记录 -->
                历史记录
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import BillMaterialsBom from '@/components/frontPage/BillMaterialsBom'
import BasicAttributes from '@/components/frontPage/BasicAttributes'
import File from '@/components/frontPage/File'
import SortTable from '@/components/frontPage/SortTable'
export default {
  name: 'BillMaterials',
  components: {
    BillMaterialsBom,
    BasicAttributes,
    File,
    SortTable
  },
  props: {
    pageName: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      baIsEdit: true,
      baLoading: false,
      baFromData: [],
      options: [],
      tabPaneList: [
        {
          label: '基本属性',
          name: '01'
        },
        // {
        //   label: 'BOM',
        //   name: '02'
        // },
        {
          label: '附件',
          name: '03'
        },
        {
          label: '关系',
          name: '04'
        },
        // {
        //   label: '替代料',
        //   name: '05'
        // },
        {
          label: '变更记录',
          name: '06'
        },
        {
          label: '使用位置',
          name: '07'
        },
        {
          label: '历史记录',
          name: '08'
        }
      ],
      tabName: '01',
      searchVal: '',
      selectVal: '',
      statusVal: ''
    }
  },
  created() {
    console.log(this.pageName, 'pageName', ['Materials'].includes(this.pageName))
    this.initBasicAttributes()
    this.initTabPane()
  },
  methods: {
    initTabPane() {
      const tabPaneList = this.tabPaneList
      if (this.pageName === 'Materials') {
        tabPaneList.splice(1, 0, { label: 'BOM', name: '02' })
        tabPaneList.splice(4, 0, { label: '替代料', name: '05' })
      }
      this.tabPaneList = tabPaneList
    },
    tabClick(val) {
      switch (val.name) {
        case '01':
          // 基本属性
          this.baIsEdit = true
          this.initBasicAttributes()
          break
        case '02':
          // BOM
          break
        case '03':
          // 附件
          break
        case '04':
          // 关系
          break
        case '05':
          // 替代料
          break
        case '06':
          // 变更记录
          break
        case '07':
          // 使用位置
          break
        case '08':
          // 历史记录
          break
      }
    },
    baHandleSave(val) {
      this.baIsEdit = true
    },
    baHandleCancel() {
      this.baIsEdit = true
      this.initBasicAttributes()
    },
    baHandleEdit() {
      this.baIsEdit = false
    },
    initBasicAttributes() {
      this.baFromData = []
      this.baLoading = true
      setTimeout(() => {
        this.baLoading = false
        this.baFromData = [
          {
            label: '名称',
            name: 'name',
            type: 'input',
            value: '',
            props: {
              type: 'input',
              placeholder: '请输入名称',
              maxlength: 10,
              clearable: true
            },
            validate: [
              { required: true, message: '请输入名称', trigger: 'blur' }
            ]
          },
          {
            label: '日期',
            name: 'dateTime',
            type: 'date',
            value: '2020-07-14',
            props: {
              type: 'date',
              placeholder: '选择日期',
              valueFormat: 'yyyy-MM-dd'
            }
          },
          {
            name: 'status',
            type: 'select',
            label: '状态',
            value: '1',
            props: {
              type: 'input',
              placeholder: '请选择'
            },
            options: [
              { value: '0', label: '禁用' },
              { value: '1', label: '启用' }
            ]
          },
          {
            name: 'radioVal',
            type: 'radio',
            label: '类型',
            value: '1',
            props: {},
            options: [
              { value: '0', label: '品牌商赞助' },
              { value: '1', label: '场地免费' }
            ]
          },
          {
            name: 'ziyuan',
            type: 'checkbox',
            label: '特殊资源',
            value: ['1'],
            props: {},
            options: [
              { value: '0', label: '上海' },
              { value: '1', label: '北京' },
              { value: '2', label: '广州' },
              { value: '3', label: '深圳' }
            ]
          },
          {
            name: 'remark',
            isRows: true,
            type: 'input',
            label: '描述',
            value: '2',
            props: {
              type: 'textarea',
              placeholder: '请输入文本域',
              autosize: { minRows: 3 }
            }
          },
          {
            name: 'isPeiSong',
            type: 'switch',
            label: '即时配送',
            value: true
          }
        ]
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/frontPage/page/materials.scss";
</style>
